<template>
  <div class="home">
    <!-- 1.顶部区域布局 -->
    <div
      class="header"
      style="margin: 8px; border: 1px solid #a3cfbb; border-radius: 5px"
    >
      <div
        class="card-header"
        style="
          border: 1px solid #cccccc;
          background-color: #f8f8f8;
          padding-left: 10px;
        "
      >
        基本信息
      </div>
      <div class="card-body">
        <div class="item">
          <SvgIcon iconClass="grade" style="width: 35px; height: 35px" />
          <div class="content1">
            <div class="num">10/0.4</div>
            <div class="bottom">电压等级(kV)</div>
          </div>
        </div>
        <div class="item">
          <SvgIcon iconClass="transformer" style="width: 35px; height: 35px" />
          <div class="content1">
            <div class="num">0</div>
            <div class="bottom">变压器(台)</div>
          </div>
        </div>
        <div class="item">
          <SvgIcon iconClass="loadrate2" style="width: 35px; height: 35px" />
          <div class="content1">
            <div class="num">146.22</div>
            <div class="bottom">负载率(%)</div>
          </div>
        </div>
        <div class="item">
          <SvgIcon iconClass="capacity" style="width: 35px; height: 35px" />
          <div class="content1">
            <div class="num">100</div>
            <div class="bottom">额定容量(kVA)</div>
          </div>
        </div>
        <div class="item">
          <SvgIcon iconClass="demand" style="width: 35px; height: 35px" />
          <div class="content1">
            <div class="num">100</div>
            <div class="bottom">申报需量(kVA)</div>
          </div>
        </div>
        <div class="item">
          <SvgIcon iconClass="device" style="width: 35px; height: 35px" />
          <div class="content1">
            <div class="num">10</div>
            <div class="bottom">测控装置(个)</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2.中间区域 -->
    <div class="middle">
      <div class="left">
        <TopSection :data="leftData" />
      </div>
      <div class="right">
        <TopSection :data="rightData" :fixed="true" />
      </div>
    </div>

    <!-- 3.底部表格区域 -->
    <div class="table">
      <div class="title">当日逐时用电曲线</div>
      <div class="charts" style="width: 100%; height: 300px"></div>
    </div>
  </div>
</template>

<script>
import TopSection from "./TopSection.vue"; // 导入复用的顶部区域组件

export default {
  components: {
    TopSection,
  },
  data() {
    return {
      leftData: [
        { iconClass: "grade", num: "5.74", bottom: "有功功率(kW)" },
        { iconClass: "transformer", num: "2.06", bottom: "无功功率(kVar)" },
        { iconClass: "loadrate2", num: "--", bottom: "环境温度(℃)" },
      ],
      rightData: [
        { iconClass: "capacity", num: "100", bottom: "额定容量(kVA)" },
        { iconClass: "demand", num: "100", bottom: "申报需量(kVA)" },
        { iconClass: "device", num: "10", bottom: "测控装置(个)" },
      ],
    };
  },
};
</script>

<style scoped>
.header {
  margin: 15px;
  border: 1px solid #a3cfbb;
}

.card-header {
  border: 1px solid #cccccc;
}

.card-body {
  display: flex; /* 使用 Flexbox 横向排列 */
  justify-content: space-between; /* 平均分配空间 */
  flex-wrap: nowrap; /* 不换行，确保所有盒子在同一行 */
  background-color: #fff;
}

.middle {
  display: flex; /* 使用 Flexbox 布局 */
  margin: 8px; /* 与顶部区域相同的外边距 */
}

.left {
  flex: 1; /* 左边占用剩余空间并允许换行 */
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

.right {
  flex: 0 0 200px; /* 右边固定宽度，不允许换行 */
}

/* 样式与上面相同 */
.item {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: 5px; /* 添加外边距，保持间距 */
  padding: 5px; /* 内边距，使内容不贴边 */
  border: 1px solid #cccccc; /* 边框样式 */
  border-radius: 5px; /* 圆角 */
  background-color: #e1f4eb;
  flex: 0 1 143px; /* 设置固定宽度为143px，允许缩小 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.content1 {
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 垂直排列内容 */
  margin-left: 10px; /* 为内容添加左边距 */
}

.num {
  font-weight: bold; /* 使数字更醒目 */
  text-align: center; /* 中心对齐 */
  color: #03a36b;
  margin-bottom: 5px;
}

.bottom {
  font-weight: bold;
  font-size: 10px; /* 说明文字稍微小一点 */
  color: black; /* 说明文字颜色 */
}
</style>
